<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/echart.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #f4f5f9;
        }

        .main {
            padding-left: 225px;
            padding-top: 100px;
            overflow: hidden;
            transition: padding-left 0.4s;
        }

        .cardbox {
            padding-left: 15px;
            padding-right: 15px;
        }

        .cardbox .card {
            /* background-color: skyblue; */
            height: 116px;
            margin-bottom: 20px;
            padding: 20px;
            color: white;
        }

        .chartbox {
            padding-left: 15px;
            padding-right: 15px;
            padding-bottom: 20px;
        }

        .chartbox .chartrow {
            height: 684px;
            /* background-color: red; */
            margin-bottom: 80px;
        }

        .chart {
            background-color: #fff;
            margin-top: 20px;
            box-sizing: border-box;
        }

        .title {
            height: 71px;
            /* background-color: skyblue; */
            width: 100%;
            box-sizing: border-box;
            padding: 20px 30px;
        }

        .title span {
            font-size: 22px;
        }

        .title .type {
            height: 30px;
            padding: 0 20px;
            border-radius: 20px;
            background: #EEF1F5;
            float: right;
            text-align: center;
            line-height: 30px;
        }

        .type b {
            margin-right: 10px;
        }

        #chengjiao #shifu #baoban #leida {
            width: 100% !important;
        }

        @media screen and (max-width:1024px) {
            .main {
                padding-left: 25px;
            }
        }
    </style>
</head>

<body>

    <div class="header">
        <div class="left">
            <img src="images/menu.png" alt="" width="30">
        </div>
        <div class="right">
            <img src="images/icon.png" alt="" width="30">
            <img src="images/close.png" alt="" width="30">
        </div>
        <div class="center">
            <input type="text" placeholder="搜索">
        </div>

    </div>
    <!-- 侧边导航 -->
    <div class="slidebar">
        <div class="top">
            <h2>凤凰教育</h2>

        </div>
        <img src="images/avatar.png" alt="" width="220">
        <div class="menu">
            <ul>
                <li><span style="background-image: url('images/icon1.png');"></span> 数据中心</li>
                <li><span style="background-image: url('images/icon2.png');"></span>学员管理</li>
                <li><span style="background-image: url('images/icon3.png');"></span>教师管理</li>
                <li><span style="background-image: url('images/icon4.png');"></span>课程管理</li>
                <li><span style="background-image: url('images/icon5.png');"></span>订单管理</li>
                <li><span style="background-image: url('images/icon6.png');"></span>财务管理</li>
                <li><span style="background-image: url('images/icon7.png');"></span>客服管理</li>
                <li><span style="background-image: url('images/icon8.png');"></span>系统设置</li>
            </ul>
        </div>
    </div>

    <div class="main">
        <div class="cardbox">
            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="card" style="background-color:#fdc35f;">
                    <p>学生人数</p>
                    <h3>102,1</h3>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="card" style="background-color:#f96868;">
                    <p>教师人数</p>
                    <h3>902</h3>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="card" style="background-color:#7cb7fe;">
                    <p>销售数量</p>
                    <h3>102,165.00</h3>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="card" style="background-color:#a99bfd;">
                    <p>视频数量</p>
                    <h3>306,365.00</h3>
                </div>
            </div>
        </div>

        <div class="chartbox">
            <div class="col-lg-8 col-xs-12">
                <div class="chartrow">
                    <div class="chart">
                        <div class="chengjiao">
                            <div class="title">
                                <span>成交量</span>
                                <span>访问量</span>
                                <div class="type">
                                    <b>今日状况</b>
                                    <b>过去15天</b>
                                    <b>过去30天</b>
                                </div>
                            </div>
                            <div id="chengjiao" style="height: 400px; width: 100%;"></div>
                        </div>
                    </div>
                    <div class="chart">
                        <div class="baoban">
                            <div class="title">
                                <span>各阶段分数报班人数</span>
                                <div class="type">
                                    <b>2021-11-1</b>
                                </div>
                            </div>
                            <div id="baoban" style="height: 200px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-xs-12">
                <div class="chartrow">
                    <div class="chart">
                        <div class="shifu">
                            <div class="title">
                                <span>实付金额</span>
                                <div class="type">
                                    <b>2021-11-1</b>
                                </div>
                            </div>
                            <div id="shifu" style="height: 310px; width: 100%;"></div>
                        </div>
                    </div>
                    <div class="chart">
                        <div class="leida">
                            <div class="title">
                                <span>测试数</span>
                                <span>报班数</span>
                                <div class="type">
                                    <b>2021-11-1</b>
                                </div>
                            </div>
                            <div id="leida" style="height: 290px; width: 100%;"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
</body>
<script>
    var myChart1 = echarts.init(document.getElementById('chengjiao'));
    let option1 = {
        xAxis: {
            type: 'category',
            data: ['2020-1-19', '2020-1-20', '2020-1-21', '2020-1-22', '2020-1-23', '2020-1-24', '2020-1-25']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            itemStyle: {
                normal: {
                    color: '#FFC254',
                    lineStyle: {
                        color: '#FFC254'
                    }
                }
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        }, {
            itemStyle: {
                normal: {
                    color: '#6AB8FF',
                    lineStyle: {
                        color: '#6AB8FF'
                    }
                }
            },
            data: [120, 632, 401, 734, 1090, 930, 720],
            type: 'line',
            smooth: true
        }]
    };

    myChart1.setOption(option1);



    var myChart2 = echarts.init(document.getElementById('shifu'));
    // 指定图表的配置项和数据
    var option2 = {
        tooltip: {},
        xAxis: {
            data: ["06:00", "08:00", "10:00", "12:00", "16:00", "22:00", "24:00"]
        },
        yAxis: {},
        series: [{
            name: '付款金额',
            itemStyle: {
                normal: {
                    color: '#C69EF7',
                }
            },
            type: 'bar',
            data: [200, 600, 800, 620, 400, 1000, 800]
        }]
    };
    myChart2.setOption(option2);

    var myChart3 = echarts.init(document.getElementById('leida'));
    let option3 = {
        radar: {
            indicator: [{
                name: 'Java',
                max: 100
            }, {
                name: '数据库',
                max: 100
            }, {
                name: '前端',
                max: 100
            }, {
                name: '数据结构',
                max: 100
            }, {
                name: '小程序',
                max: 100
            },

            ],

            radius: 120,

            axisLabel: {

                show: true,

                color: '#333',

                showMinLabel: false

            },

        },

        series: [{

            name: '预算 vs 开销',

            type: 'radar',

            //             areaStyle: {normal: {}},

            data: [

                {

                    value: [50, 70, 88, 95, 50, 19],

                    name: '刘德华',

                    //                    label: {

                    //                        normal: {

                    //                            show: true

                    //                        }

                    //                    }

                },

                {

                    value: [50, 84, 58, 71, 42, 81],

                    name: '班级平均',

                    //                    label: {

                    //                        normal: {

                    //                            show: true

                    //                        }

                    //                    }

                }

            ]

        }],

        color: ['#fa610e', '#00aaee']

    };
    myChart3.setOption(option3);

    var myChart4 = echarts.init(document.getElementById('baoban'));
    let option4 = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['0-40分', '40-60分', '60-80分', '80-100分', '无分数']
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [{
                value: 335,
                name: '0-40分'
            }, {
                value: 310,
                name: '40-60分'
            }, {
                value: 234,
                name: '60-80分'
            }, {
                value: 135,
                name: '80-100分'
            }, {
                value: 1548,
                name: '无分数'
            }]
        }]
    };

    myChart4.setOption(option4);
</script>

</html>